<template>
  <body>
    <div class="home">
      <header class="header">
        <div class="search-bar">
          <input v-model="Searchkey" type="text" placeholder="资源共享，搜你所想" />
          <button @click="search">搜索
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
              viewBox="0 0 16 16">
              <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
            </svg>
          </button>
        </div>
      </header>

      <div class="content">
        <div class="resource-list">
          <h2>最热门(HOT!)</h2>
          <ul>
            <li v-for="resource in popularResources" :key="resource">
              {{ resource }}
            </li>
          </ul>
        </div>

        <div class="resource-list">
          <h2>最新(NEW!)</h2>
          <ul>
            <li v-for="resource in latestResources" :key="resource">
              {{ resource }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import router from '@/router';
export default {
  name: "HomeView",
  components: {
  },
  setup() {
    let popularResources = ref([]);
    let latestResources = ref([]);
    let Searchkey = ref("");

    let getPopResources = () => {
      $.ajax({
        url: 'http://10.142.225.1:3000/file/hot',
        success: (resp) => {
          popularResources.value = resp;
        }
      })
    }

    let getlatResources = () => {
      $.ajax({
        url: 'http://10.142.225.1:3000/file/new',
        success: (resp) => {
          latestResources.value = resp;
        }
      })
    }

    let search = () => {
      localStorage.setItem("SearchKey", Searchkey.value);
      router.push({ name: "downloadfile" });
    }

    return {
      popularResources, latestResources, Searchkey,
      getPopResources, getlatResources, search,
    }
  },
  mounted() {
    this.getPopResources();
    this.getlatResources();
  }
}
</script>

<style scoped>
body {
  /* 100%窗口高度 */
  height: 100vh;
  /* 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置背景 */
  /*纯色背景*/
  background: linear-gradient(200deg, #e7f3f3, #e3eeff);
  /*图片背景*/
  background-image: url(../assets/主页背景.png);
  background-size: cover;
  /* 将背景图片按比例缩放，以覆盖整个背景区域 */
  background-repeat: no-repeat;
  /* 禁止背景图片重复 */
  background-position: center center;
  /* 将背景图片水平垂直居中 */
}


.home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  width: 300px;
  height: 200px;
}

.search-bar {
  margin-top: 20px;
}

.search-bar input {
  width: 300px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-bar button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #4285f4;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  /* 添加间距 */
}

.resource-list {
  flex-basis: 45%;
}

.resource-list h2 {
  font-size: 20px;
}

.resource-list ul {
  list-style: none;
  padding: 0;
}

.resource-list li {
  margin-bottom: 5px;
  font-family: "STKaiti", serif;
  /* 设置行楷字体 */
}

button {
  margin-top: 35px;
  background-color: lightcyan;
  outline: none;
  border-radius: 8px;
  padding: 13px;
  color: gray;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: rgb(64, 191, 191);
  color: lightcyan;
  transition: background-color 0.5s ease;
}
</style>
